<template>
  <div class="hello">
    <table>
      <thead>
        <tr>
          <th>商品状态</th>
          <th>商品id</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(value, index) in this.$parent.list" :key="index">
          <th><input type="checkbox" v-model="value.zhuangtai" /></th>
          <th>{{ value.id }}</th>
          <th>{{ value.name }}</th>
          <th>{{ value.price }}</th>
          <th>
            <button @click="jian(index)">-</button>
            {{ value.num }}
            <button @click="add(index)">+</button>
          </th>
          <th><button @click="remove(index)">移除</button></th>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>
            <label for="quan">是否全选</label>
            <input type="checkbox" v-model="quan" id="quan" @click="qx()" />
          </th>
          <th>总价为{{ zong }}</th>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  name: "Table",
  props: {
    // msg: String,
    // arr:Array,
    quan:Boolean
  },
  methods: {
    jian(index) {
      this.$parent.list[index].num == 1 ? 1 : this.$parent.list[index].num--;
      this.$parent.list[index].znum=this.$parent.list[index].num*this.$parent.list[index].price;
    },
    //数量增加
    add(index) {
      this.$parent.list[index].num++;
      this.$parent.list[index].znum=this.$parent.list[index].num*this.$parent.list[index].price;
    },
    //删除商品
    remove(index) {
      this.$parent.list.splice(index, 1);
    },
    //是否全选
    qx() {
      if (this.$parent.quan) {
        this.$parent.list.forEach((va) => {
          va.zhuangtai = false;
        });
      } else {
        this.$parent.list.forEach((va) => {
          va.zhuangtai = true;
        });
      }
      this.$parent.quan=!this.quan;
    },
  },
  computed: {
    //计算总价
    zong() {
      let j=0;
      for(let i=0;i<this.$parent.list.length;i++){
        if(this.$parent.list[i].zhuangtai){
          j+=this.$parent.list[i].znum;
        }
      }
      return j
      // pre为上一个数据，ele就是数组
      // return this.$parent.list.reduce((pre, ele) => {
      //   return ele.zhuangtai ? ele.num * ele.price : pre;
      // }, 0);
    },
  },
  //监听
  // watch: {
  //   arr: {
  //     handler: function (value) {
  //       let zt = 0;
  //       //循环遍历查询是否全选状态
  //       value.forEach((element) => {
  //         //如果有一个状态为false则取消全选状态
  //         if (element.zhuangtai) {
  //           zt++;
  //         }
  //       });
  //       //根据状态设置全选状态
  //       if (zt == value.length) {
  //         this.$parent.quan = true;
  //       } else {
  //         this.$parent.quan = false;
  //       }
  //       console.log(123);
  //     },
  //     //开启深度监听
  //     deep: true,
  //   },
  // },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
